<template>
  <MainPage activeMenu="/">
    <el-container>
      <el-main>
        <div class="block text-center m-t-4">
          <el-carousel trigger="click" height="450px">
            <el-carousel-item v-for="(image, index) in images" :key="index">
              <el-image class="carousel-image" :src="image" fit="cover" />
              <h3 class="carousel-index">{{ index + 1 }}</h3>
            </el-carousel-item>
          </el-carousel>
        </div>

        <div class="home">
          <el-row class="foreground-div">
            <el-col :span="8" class="left-view">
              <div class="image-container">
                <el-image class="left-view-image" src="/src/assets/imgs/sc1.png" fit="cover" />
              </div>
            </el-col>
            <el-col :span="16" class="right-view">
              <div class="right-view-text">
                <span class="brand-intro">品牌简介</span>
                <span class="brand-details">brand简介brand简介简介</span>
                <el-divider class="text-divider" content-position="left" />
                <p class="editable-text">编辑文本编辑文本编辑文本编辑文本编辑文本编辑编辑文本编辑文本编辑文本编辑文本编辑文本编辑</p>
              </div>
              <div class="button-container">
                <el-button type="primary" class="more-info-button">了解更多</el-button>
              </div>
            </el-col>
          </el-row>
          <el-row class="background-div"></el-row>
        </div>

        <el-divider class="text-divider" style="margin-top: 20px;"/>

        <div class="darkseagreen-section">
          <el-row :gutter="40" justify="center">
            <el-col :span="7">
              <div class="image-container">
                <el-image class="section-image" src="/src/assets/imgs/sc1.png" fit="cover" />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="text-container">
                <p class="section-title">这是介绍这是介绍这是介绍</p>
                <p class="section-description">这是介绍这是介绍这是介绍这是介绍这是介绍</p>
              </div>
            </el-col>
            <el-col :span="7">
              <div class="image-container">
                <el-image class="section-image" src="/src/assets/imgs/sc1.png" fit="cover" />
              </div>
            </el-col>
          </el-row>
        </div>

        <div class="cornsilk-section">
          <el-row justify="start" :gutter="40">
            <el-col :span="16">
              <el-image class="card-image" src="/src/assets/imgs/sc1.png" fit="cover" />
            </el-col>
            <el-col :span="8">
              <div class="text-container" style="background-color: cornsilk;">
                <h2 class="section-title">好好好好好好好好</h2>

                <p class="section-description">这是介绍这是介绍这是介绍这是介绍这是介绍</p>
              </div>
            </el-col>
          </el-row>
        </div>

        <el-divider class="text-divider" />

        <div class="cornsilk-section">
          <el-row justify="start" :gutter="40">

            <el-col :span="8">
              <div class="text-container" style="background-color: cornsilk;">
                <h2 class="section-title">好好好好好好好好</h2>

                <p class="section-description">这是介绍这是介绍这是介绍这是介绍这是介绍</p>
              </div>
            </el-col>            
            <el-col :span="16">
              <el-image class="card-image" src="/src/assets/imgs/sc1.png" fit="cover" />
            </el-col>
          </el-row>
        </div>


      
      </el-main>
    </el-container>
  </MainPage>
</template>

<script>
import { ref, computed } from 'vue';
import MainPage from './Component/MainPage.vue';

export default {
  name: 'Home',
  components: {
    MainPage,
  },
  setup() {
    const images = ref([
      '/src/assets/imgs/l1.png',
      '/src/assets/imgs/l2.png',
      '/src/assets/imgs/l3.png',
      '/src/assets/imgs/l4.png',
    ]);

    const scales = ref([1, 1, 1]);

    const imageSrc = ref('/src/assets/imgs/sc1.png');

    const imageStyles = computed(() => {
      return scales.value.map(scale => ({
        transform: `scale(${scale})`,
        transition: 'transform 0.3s ease',
      }));
    });

    const handleMouseEnter = (index) => {
      try {
        scales.value[index] = 1.2;
      } catch (error) {
        console.error('Error handling mouse enter:', error);
      }
    };

    const handleMouseLeave = (index) => {
      try {
        scales.value[index] = 1;
      } catch (error) {
        console.error('Error handling mouse leave:', error);
      }
    };

    return {
      images,
      imageStyles,
      handleMouseEnter,
      handleMouseLeave,
      imageSrc,
    };
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}

.block {
  margin-top: 1rem;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.home {
  width: 100%;
  height: auto;
  padding: 9rem;
  text-align: center;
  margin: 0 auto;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.background-div {
  width: 100%;
  height: 175px;
  background-color: rgba(118, 150, 158, 0.852);
  position: absolute;
  bottom: 0;
}

.foreground-div {
  width: 50%;
  position: absolute;
  z-index: 2;
  bottom: 0;
  display: flex;
}

.left-view {
  height: 100%;
}

.right-view {
  width: 100%;
  height: auto;
  z-index: 1;
}

.right-view-text {
  max-height: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.brand-intro {
  font-size: 25px;
  white-space: nowrap;
}

.brand-details {
  font-size: 16px;
  margin-bottom: 5px;
  white-space: nowrap;
}

.left-view-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 15px;
}

.carousel-image {
  width: 100%;
  height: 100%;
}

.carousel-index {
  color: #475669;
  opacity: 0.75;
  margin: 0;
  text-align: center;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.text-divider {
  margin-top: 3px;
  width: 100%;
  border-width: 2px;
  border-color: black;
}

.editable-text {
  margin-left: 0.5rem;
}

.button-container {
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.more-info-button {
  margin-right: 10px;
  margin-top: 60px;
}

.darkseagreen-section {
  margin-top: 2rem;
  background-color: rgb(162, 228, 162);
  width: 80%;
  height: auto;
  margin: 3rem auto 0;
}

.text-container {
  text-align: center;
  padding: 0;
}

.section-title {
  font-size: 20px;
  margin: 0;
}

.section-description {
  margin: 0;
  text-align: left;
}

.cornsilk-section {
  width: 85%;
  height: auto;
  margin: 3rem auto 0;
  padding: 1rem;
}

.image-column {
  position: relative;
  overflow: hidden;
  text-align: left;
  display: flex;
  justify-content: flex-end;
  margin-left: 1rem;
}

.card-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 25px;
  object-fit: cover;
  margin-left: 0;
  margin-right: auto;
  margin-top: 1rem;
}

.xinping-section {
  position: relative;
  height: 125px;
}

.xinping-card {
  width: 100%;
  height: 380px;
  background-color: #ffafaf;
  overflow: hidden;
}

.xinping-card-image {
  width: 100%;
  height: 275px;
  object-fit: cover;
}

.xinping-divider {
  background-color: #475669;
  margin: 0;
  height: 2px;
  width: 100%;
}

.card-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.5);
  padding: 1rem;
  border-radius: 10px;
}

@media (max-width: 600px) {
  .card-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .more-info-button {
    margin-left: 0;
    margin-top: 10px;
  }
}

@media (max-width: 768px) {
  .content {
    margin-top: 1rem;
  }
}
</style>
